// components/custom-picker/custom-picker.ts
import dayjs from 'dayjs'
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    pickerParams: {
      type: Object,
      defaultValue: '',
      value: {
        show: false,
        pickerType: 'gender',
        defaultValue: ''
      },
      observer(newVal) {
        // 在这里处理值变化逻辑
        if (newVal.show && newVal.pickerType === 'date') {
          this.populatePicker();
        }
        if (newVal.show && newVal.pickerType === 'MBTI' || newVal.pickerType == 'mbti') {
          this.handleData()
        }
        if (newVal.show && newVal.pickerType !== 'date' && newVal.show && newVal.pickerType !== 'MBTI') {
          this.setData({ pickerValue: [newVal.defaultValue] })
        }
        // pickerType == "interestIds"
        // if () {

        // }
      }
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    pickerDatas: {
      gender: { title: '性别', data: ['全部', '男性', '女性', '其他'] },
      MBTI: { title: 'MBTI', data: ['INTP', 'INTJ', 'ENTJ', 'ENTP', 'ENFP', 'INFP', 'ENFJ', 'INFJ', 'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ', 'ISTP', 'ISFP', 'ESTP', 'ESFP'] },
      language: { title: '选择语言', data: ['English', '简体中文', '繁体中文'] },
      date: { title: '选择日期', data: [] },
      partnerType: {
        title: '搭子',
        data: ['在线游戏', '虚拟读书俱乐部', '电影之夜', '密室逃脱', '欢乐时光']
      }
    },
    yearColumns: [1930],
    monthColumns: ['01'],
    dayColumns: ['01'],
    pickerValue: [8, 0, 0],
    provincesColumns: [],
    cityColumns: [],
    regionColumns: []
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleData () {
      const { pickerDatas, pickerParams } = this.data
      if (pickerParams.pickerType == 'MBTI' || pickerParams.pickerType == 'mbti') {
        const list = pickerDatas.MBTI.data
        // 获取下表
        const index = list.indexOf(pickerParams.defaultValue)
        this.setData({ pickerValue: [index] })
      }
    },
    bindChange(event: { detail: { value: number[] } }) {
      const currentType = this.data.pickerParams.pickerType;
      const valueArr = event.detail.value;
      this.setData({ pickerValue: valueArr })
    },
    dateChange(event: { detail: { value: number[] } }) {
      const valueArr = event.detail.value;
      const year = this.data.yearColumns[valueArr[0]]
      const month = this.data.monthColumns[valueArr[1]]
      this.updateDays(year, Number(month))
      this.setData({ pickerValue: valueArr })
    },
    onCancel() {
      this.triggerEvent('cancel');
      this.setData({ visible: false })
    },
    onConfirm() {
      const { pickerParams, pickerValue, yearColumns, monthColumns, dayColumns, pickerDatas } = this.data
      // 日期选择器
      if (pickerParams.pickerType == 'date') {
        let year = yearColumns[pickerValue[0]]
        let month = monthColumns[pickerValue[1]]
        let day = dayColumns[pickerValue[2]]
        const obj = {
          year,
          month,
          day
        }
        this.triggerEvent('confirm', obj);
      } else if (pickerParams.pickerType == 'MBTI' || pickerParams.pickerType == 'mbti') {
        const list = pickerDatas.MBTI.data;
        const index = pickerValue[0] || 0
        // 如果没有选，就默认下标为0
        const currentMbti = list[index < 0 ? 0 : index]
        const obj = {
          text: currentMbti,
          value: currentMbti
        }
        this.triggerEvent('confirm', obj);
      } else { // 

      }
      this.setData({ visible: false })
    },
    populatePicker() {
      const { pickerParams } = this.data
      const today = new Date();
      // 填充年份
      const yearSelect: number[] = [];
      for (let i = today.getFullYear() - 50; i <= today.getFullYear() + 10; i++) {
        yearSelect.push(i);
      }
      this.setData({ yearColumns: yearSelect })
      // 填充月份
      const monthSelect: string[] = [];
      for (let i = 1; i <= 12; i++) {
        const value = String(i).padStart(2, "0");
        monthSelect.push(value);
      }
      this.setData({ monthColumns: monthSelect })
      const defaultYear = this.data.pickerParams.defaultValue.split('-')[0] || yearSelect[0]
      const defaultMonth = this.data.pickerParams.defaultValue.split('-')[1] || monthSelect[0]
      const defaultDay = this.data.pickerParams.defaultValue.split('-')[2] || 0
      this.updateDays(Number(defaultYear), Number(defaultMonth), Number(defaultDay));
      // this.updateDays(2024, 1)
    },
    // 更新日期
    updateDays(year: number, month: number, day?: number) {
      const { yearColumns, monthColumns, dayColumns } = this.data
      const daysInMonth = new Date(year, month, 0).getDate();
      const daySelect: string[] = [];
      for (let i = 1; i <= daysInMonth; i++) {
        // padStart是将没有达到长度为2的，自动前面填充0
        const value = String(i).padStart(2, "0");
        daySelect.push(value);
      }
      this.setData({ dayColumns: daySelect })
      if (day) {
        // 有值则是初始化，赋值历史数据
        let yIndex: any = 0
        let mIndex: any = 0
        let dIndex: any = 0
        yearColumns.map((item: any, index: any) => {
          if (item == year) {
            yIndex = index
            return
          }
        })
        monthColumns.map((item: any, index: any) => {
          if (item == month) {
            mIndex = index
            return
          }
        })
        daySelect.map((item: any, index: any) => {
          if (item == day) {
            dIndex = index
            return
          }
        })
        const list = [yIndex, mIndex, dIndex]
        
        this.setData({ pickerValue: list })
      }
    }
  }
})